<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Dashboard Template for Bootstrap</title>
	<!-- Bootstrap core CSS -->
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link th:href="@{/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */

		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
	</style>
</head>

<body>
	<div th:replace="~{common/commonsUser::topbar}"></div>


	<div class="container-fluid">
		<div class="row">
			<!--引入抽取的topbar-->
			<!--模板名 ： 会使用thymeleaf的前后缀配置规则进行解析
			使用~{模板::标签名}-->
			<div th:replace="~{common/commonsUser::sidebar(active='train.html')}"></div>

			<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
				<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
					<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
						<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
					</div>
					<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
						<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
					</div>
				</div>
				<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
					<h1 class="h2">课程考勤</h1>
					<div class="btn-toolbar mb-2 mb-md-0">
						<div class="btn-group mr-2">
							<button class="btn btn-sm btn-outline-secondary">Share</button>
							<button class="btn btn-sm btn-outline-secondary">Export</button>
						</div>
						<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
							This week
						</button>
					</div>
				</div>
				<div>
					<form th:action="@{/findCourse}" method="post">
						<table>
							<tr>
								<th>
									<div class="form-group">
										<label for="coursename">课程名称</label>
										<input name="coursename" type="text" class="" id="coursename" placeholder="心理课">
									</div>
								</th>
								<th>
									<div class="form-group">
										<label for="place">上课地点</label>
										<input name="place" type="text" class="" id="place" placeholder="会议室">
									</div>
								</th>
								<th>
									<div class="form-group">
										<label>开课部门</label>
										<!--提交的是部门的ID-->
										<select class="" name="departmentname">
											<option value="">请选择</option>
											<option  th:each="dept:${departments}" th:text="${dept.departmentname}" th:value="${dept.departmentname}">1</option>
										</select>
									</div>
								</th>
								<th>
									<div class="form-group">
										<label for="credits">学分</label>
										<input name="credits" type="text" class="" id="credits" placeholder="2">
									</div>
								</th>
								<th>
									<div class="form-group">
										<label >课程类型</label>
										<select class="" name="type">
											<option value="">请选择</option>
											<option value="1">公共课</option>
											<option value="2">专业课</option>
										</select>
									</div>
								</th>
							</tr>
						</table>
						<button type="submit" class="btn btn-primary">查询课程</button>
					</form>
				</div>

				<hr size="1" noshade="noshade" style="border:1px #cccccc dotted;">

				<div class="table-responsive">
					<table class="table table-striped table-sm">
						<thead>
						<tr>
							<th>课程编号</th>
							<th>课程名称</th>
							<th>上课地点</th>
							<th>上课时间</th>
							<th>打卡截止时间（分钟）</th>
							<th>开课部门</th>
							<th>学分</th>
							<th>课程类型</th>
							<th></th>
						</tr>
						</thead>
						<input type="hidden" id="msg" th:value="${msg}" >
						<input type="hidden" id="msgCode" th:value="${msgCode}" >
						<tbody>
						<tr th:each="course:${courses}">
							<td th:text="${course.getId()}"></td>
							<td th:text="${course.getCoursename()}"></td>
							<td th:text="${course.getPlace()}"></td>
							<td th:text="${#dates.format(course.getTime(),'yyyy-MM-dd HH:mm:ss')}"></td>
							<td th:text="${course.getAborttime()}"></td>
							<td th:text="${course.getDepartmentname()}"></td>
							<td th:text="${course.getCredits()}"></td>
							<td th:text="${course.getType()==1?'公共课':'专业课'}"></td>
							<td >
	<!--							<button id="checkin" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal" th:action="@{/course/}+${course.id}">打卡</button>-->
								<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" th:onclick="'Valuess(' + ${course.id} + ');'">打卡</button>
							</td>
						</tr>

						</tbody>
					</table>
				</div>
			</main>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="exampleModalLabel">打卡</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body">
					<form class="form_modal" th:action="@{/AddAtt}" id="AddAtt" method="post">
						<input type="hidden" id="courseid" name="courseid" value="">
						<p><b style="color: red">*</b>请输入<b style="color: red">身份证号</b>或<b style="color: red">考勤卡号</b></p>
						<div class="form-group">
							<input type="text" class="form-control" id="cardid" name="cardid">
						</div>
						<p id="msg" name="msg">请输入卡号</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="submit" type="submit" class="btn btn-primary" onclick="AddAtt()" disabled>确认</button>
				</div>
			</div>
		</div>
	</div>
	<!--</div>-->

	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
	<script type="text/javascript" th:src="@{/js/popper.min.js}" ></script>
	<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</body>
<script>
	<!--向模态弹窗传值-->
	function Valuess (id) {
		$("#courseid").val(id);
		console.log(courseid);
	}
</script>

<script>
	function AddAtt () {
		var courseid=document.getElementById("courseid").value;
		console.log(courseid);
		var cardid = document.getElementById("cardid").value;
		console.log(cardid);
		var form =document.getElementById("AddAtt");
		form.submit();
		$("#myModal").on("hidden.bs.modal", function() {
			$(this).removeData("bs.modal");
		});

	}

	$(function(){
		$('#cardid').bind('input propertychange', function() {
			var cardid = $("#cardid").val();
			console.log(cardid);
			if (cardid == null) {
				return;
			}
			$.ajax({
				cache: true,
				type: "get",
				url: "http://localhost:8080/findcardid",
				data:{"str":cardid},
				success: function (data) {
					if(data.cardStateId==1){
						$('#submit').removeAttr("disabled");
						document.getElementById("msg").innerHTML="卡号有效";
					}else {
						$('#submit').attr("disabled","disabled");
						document.getElementById("msg").innerHTML="请输入有效卡号！";
					}
				}
			})
		});
	})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.3.0/sweetalert2.all.min.js" integrity="sha512-HL3ljb5fSrMMfAiRxSP+EdI/KC1kl6gVIzCV7GaJ4yFWCpnrcGxPAmytnKk9KNigFhyICxOlgD+uuaS07t7RdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	$(function(){
		hint1();//页面加载时加载
	})
	function hint1(){
		// var message1=document.getElementById("msg1").value;
		// var messageCode1=document.getElementById("messageCode1").value;
		var msg1=$("#msg").val();//获取id为msg1隐藏域的value值
		var msgCode1=$("#msgCode").val();//获取Id为msgCode1隐藏域的value值
		console.log("msg:",msg1);
		console.log("messageCode:",msgCode1);
		if (msg1!=""&&msg1!=null){
			msg(msg1,msgCode1);
		}

	}
	function msg(mge,messageCode){
		if (messageCode == "200") {
			Swal.fire({
				icon: "success",
				title: "提示",
				text: mge,
				showConfirmButton: false,
				timerProgressBar: true,
				timer: 1500
			});
		} else {
			Swal.fire({
				icon: "error",
				title: "提示",
				text: mge,
				showConfirmButton: false,
				timerProgressBar: true,
				timer: 2500
			});
		}
	}
</script>

</html>